<template>
  <div style="height:100%;">
    <div style="transition:1s;background:#000;height:100%;">
      <div class="my-header">
        <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
        <strong>{{title}}</strong>
        <i class="myMsg"></i>
      </div>
      <div class="address-from" style="transition:1s;height:100%;transform: scale(1);" :class="addressVisible? 'popupVisible' : ''">
        <div class="cell-from-item">
          <span class="title">收货人 </span>
          <div class="content">
            <input type="text" v-focus v-model="addressForm.receiver">
          </div>
        </div>
        <div class="cell-from-item">
          <span class="title">联系方式 </span>
          <div class="content">
            <input type="text" v-model="addressForm.phone">
          </div>
        </div>
        <div class="cell-from-item" @click="()=>addressVisible=true" style="justify-content:space-between;">
          <span class="title">所在地区 </span>
          <div class="content">
            <input class="area-select" type="text" disabled :value="addressForm.province + addressForm.city + addressForm.area" placeholder="">
          </div>
          <i class="arrow-right" style="opacity: .4"></i>
        </div>
        <div class="cell-from-item">
          <span class="title">详细地址 </span>
          <div class="content">
            <input type="text" placeholder="街道、楼牌号" v-model="addressForm.address">
          </div>
        </div>
        <div class="cell-from-item">
          <span class="title">邮编</span>
          <div class="content">
            <input type="text" placeholder="邮编" v-model="addressForm.zipCode">
          </div>
        </div>
        <div class="cell-from-item switch">
          <span class="title">设为默认地址</span>
          <div class=" ">
            <mt-switch v-model="addressForm.selected"></mt-switch>
          </div>
        </div>
        <div class="save-address" @click="handleUpdate">确认</div>
        <div v-if="$route.query.id" class="del-address" @click="handleDel">删除收货地址</div>
        <!--<div class="save-address" @click="useAddress">保存并使用</div>-->
      </div>
    </div>
    <div>
      <mt-popup v-model="addressVisible" position="bottom" class="address-pricker">
        <div class="address-picker-header">
          <p>配送至</p>
          <span class="picker-close" @click="()=>addressVisible=false">&times;</span>
        </div>
        <v-distpicker :placeholders="{ province: '请选择', city: '请选择', area: '请选择' }" wrapper="address-pricker-wrapper" type="mobile"
          @selected="onSelected"></v-distpicker>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {
    Toast,
    MessageBox
  } from 'mint-ui'
  import {
    mapGetters
  } from 'vuex'
  import {
    getUserAddress,
    delUserAddress
  } from '@/service/getData'
  import VDistpicker from '@/plugins/v-distpicker/src'
  import * as Validate from '@/utils/validate'
  export default {
    data() {
      return {
        addressForm: {
          receiver: '',
          phone: '',
          province: '',
          city: '',
          area: '',
          address: '',
          zipCode: '',
          selected: false,
          addressType: 1 // 地址类型 1正常 2临时
        },
        title: '新建地址',
        addressVisible: false,
        errMessage: '',
        backUrl: ''
      }
    },
    watch: {},
    components: {
      VDistpicker
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      // 删除
      handleDel() {
        MessageBox.confirm('确认删除该地址吗?').then(action => {
          if (action === 'confirm') {
            const params = {
              addressId: this.$route.query.id
            }
            delUserAddress(params).then(res => {
              this.$router.go(-1)
            }).catch(() => {})
          }
        }).catch(() => {})
      },
      // 更新并且使用地址
      handleUpdate() {

        const params = {
          userId: this.userInfo.id,
          receiver: encodeURI(this.addressForm.receiver),
          province: encodeURI(this.addressForm.province),
          city: encodeURI(this.addressForm.city),
          area: encodeURI(this.addressForm.area),
          address: encodeURI(this.addressForm.address),
          zipCode: this.addressForm.zipCode,
          phone: this.addressForm.phone,
          isDefault: Number(this.addressForm.selected),
          addressType: this.addressForm.addressType // 新增地址类型
        }

        if (!this.valid()) {
          return Toast({
            message: this.errMessage
          })
        }
        // 有传Id则是编辑模式 没传是新增
        if (this.$route.query.id) {
          params.addressId = this.$route.query.id
        }
       
        this.$store.dispatch('UpdateUserAddress', params).then(res => {
          this.$router.go(-1)
        }).catch(() => {})
      },
      valid() {
        if (this.addressForm.receiver === '') {
          this.errMessage = '请填写收货人'
          return false
        }
        if (this.addressForm.phone === '') {
          this.errMessage = '请填写手机号'
          return false
        }
        if (!Validate.mobile(this.addressForm.phone)) {
          this.errMessage = '手机格式不正确'
          return false
        }
        if (this.addressForm.province === '') {
          this.errMessage = '请选择地区'
          return false
        }
        if (this.addressForm.address === '') {
          this.errMessage = '请填写详细地址'
          return false
        }

        if (this.addressForm.zipCode === '') {
          this.errMessage = '请填写邮编'
          return false
        }
        if (!Validate.zipcode(this.addressForm.zipCode)) {
          this.errMessage = '邮编格式不正确'
          return false
        }
        return true
      },
      // 地区选择
      onSelected(data) {
        this.addressVisible = false
        this.addressForm.province = data.province.value
        this.addressForm.city = data.city.value
        this.addressForm.area = data.area.value
      },
      fetchData() {
        if (this.$route.query.id) {
          this.title = '编辑地址'
          const params = {
            addressId: this.$route.query.id
          }
          getUserAddress(params).then(res => {
            this.addressForm.receiver = res.data.userAddress.receiver
            this.addressForm.phone = res.data.userAddress.phone
            this.addressForm.province = res.data.userAddress.provinceName
            this.addressForm.city = res.data.userAddress.cityName
            this.addressForm.area = res.data.userAddress.areaName
            this.addressForm.address = res.data.userAddress.address
            this.addressForm.zipCode = res.data.userAddress.zipCode
            this.addressForm.selected = res.data.userAddress.isDefault === 1
          }).catch(() => {})
        }
      }
    },
    mounted() {
      this.fetchData()
    }
  }
</script>
<!-- address -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';

  .address-from {
    background: #fff;
    padding-top: 1.25rem;
    .cell-from-item {
      @include flexbox(flex-start,
      center,
      row,
      nowrap);
      padding: $padding;
      border-bottom: 1px solid #eee;
      .title {
        font-size: $subtitle;
        color: #333;
        white-space: nowrap;
        margin-right:10px;
      }
      .content {
        width: 100%;
        @include placeholderColor($gray);
        input {
          width: 100%;
          border: none;
          outline: none;
          box-shadow: none;
          text-shadow: none;
          text-align: right;
          font-size: $subtitle;
          color: #333;
          line-height: 24px;
        }
        .area-select {
          pointer-events: none;
          &:disabled {
            background-color: #ffffff;
          }
        }
        .arrow-right {
          background-size: auto 100%;
        }
      }
      &.switch {
        justify-content: space-between;
      }
    }

    .save-address {
      bottom: .2rem;
      width: 90%;
      text-align: center;
      padding: $padding 0;
      background: $red;
      font-size: $title;
      color: #fff;
      margin: .5rem auto;
      border-radius: 2px;
    }
    .del-address {
      bottom: .2rem;
      width: 90%;
      text-align: center;
      padding: $padding 0;
      background: $graybg;
      font-size: $title;
      color: #000;
      margin: .5rem auto;
      border-radius: 2px;
    }
  }

  .address-pricker {
    @include wh(100%,
    70%);
    .address-picker-header {
      position: relative;
      p {
        padding: $padding 0;
        font-size: 15px;
        color: #333;
        text-align: center;
      }
      .picker-close {
        position: absolute;
        right: 10px;
        bottom: 7px;
        font-weight: normal;
        font-size: 25px;
        color: #999;
        opacity: .7;
      }
    }
  }

  .popupVisible {
    transform: scale(0.95) !important;
  }
</style>